<template>
	<gracePage headerBG="#FFFFFF" footerBg="#FFFFFF" :customHeader="false">
		<view slot="gBody">
			
			<view class="grace-product-padding">
				<scroll-view class="grace-scroll-x" :show-scrollbar="false" scroll-x>
					<image :style="{width: width}" class="grace-product-info-img" :src="item" mode="widthFix" v-for="(item,index) in images" :key="index"></image>		
				</scroll-view>
				<view class="grace-margin-top">
					<text class="grace-text">微信号 z450581565，添加老师进行视频面试。</text>
				</view>				
			</view>	
			
		</view>
		<!-- 右侧挂件实现菜单 -->
		<view slot="gRTArea">
			<view class="grace-pop-menu" >
				<text class="grace-pop-item grace-bg-blue" style="font-size:28rpx;" @tap="zoomIn">放大</text>
				<text class="grace-pop-item grace-bg-blue" style="font-size:28rpx;" @tap="zoomOut">缩小</text>
				<text class="grace-pop-item grace-bg-blue" style="font-size:28rpx;" @tap="home">原始</text>
			</view>

		</view>
	</gracePage>
</template>
<script>
	var _self;
	
	export default {
	    data() {
	    	return {
				images:[],
				topicImageSrc:"",//题目图片地址前缀
				widthValue:100,
				width:100+"%",
			}
	    },
		onLoad: async function (e){
			_self = this;
			_self.topicImageSrc = _self.$myFunction.appConfig().serverIp+"resource/yunShangTianKong/topic/";
			let imagesTemp = e.images.split(",");
			imagesTemp.forEach( (item) =>{
				_self.images.push(_self.topicImageSrc+e.productCode+'/'+e.id+'/'+item);
				// console.log(_self.topicImageSrc+e.productCode+'/'+e.id+'/'+item);
			})
			
		},

		methods:{
			zoomIn:function(){
				_self.widthValue += 20;
				_self.width = _self.widthValue+"%";
			},
			zoomOut:function(){
				_self.widthValue -= 20;
				_self.width = _self.widthValue+"%";
			},
			home:function(){
				_self.widthValue = 100;
				_self.width = _self.widthValue+"%";
			},
		},
		components:{
			
		},
	}	
</script>

<style>
.grace-product-padding{padding:20rpx 25rpx;}
.grace-product-info-img{width:100%;}
/* 多功能菜单样式 */
.grace-pop-menu{width:100%; font-size:0;}
.grace-pop-item{width:88rpx; height:88rpx; line-height:88rpx; text-align:center; font-size:60rpx; color:#FFFFFF; border-radius:50%; margin:20rpx 0; overflow:hidden; display: block;}
.grace-pop-image{width:88rpx; height:88rpx; border-radius:50%;}

</style>